<template>
  <div class="merak-colapse-item" :class="{ 'is-active': active }" :style="{'height':minHeight+'px','min-height':minHeight+'px'} ">
    <div class="merak-colapse-item-header" @click="open">
      <div class="colapse-item-header-cont" >
        <slot name="header"></slot>
      </div>
      <div class="colapse-item-header-icon" >
        <i class="el-icon" :class="{ open: active }">
          <el-icon v-if="active"><ArrowDownBold /></el-icon>
          <el-icon v-else><ArrowUpBold /></el-icon>
         
        </i>
      </div>
    </div>
    <div class="merak-colapse-item-body">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, ref, watchEffect,watch } from "vue";

const props = defineProps({
  minHeight: {
    type: String,
    default: "84"
  },
  isActive: {
    type: Boolean,
    default: false
  }
});

const active = ref(props.isActive);
// let active = ref(false);
const open = () => {
  active.value = !active.value;
};

watchEffect(() => {
  active.value = props.isActive;
});
</script>
<style lang="scss"  scpoed >
.merak-colapse-item {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  min-height: 50px;
  margin-bottom: 5px; //custom
  border: 1px dashed #e6e6ee;

  transition: "height" 0.4s;
  .merak-colapse-item-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: 148px;
    padding: 0px 20px;
    background: #f8f9fa;
    cursor: pointer;
    .colapse-item-header-cont {
      cursor: pointer;
      
      color: #303133;
      font-size: 13px;
      font-weight: 400;
    }
    .colapse-item-header-icon {
      cursor: pointer;
      position: relative;
      top: 0px;
      left: 3px;
      width: 20px;
      font-size: 10px;
      // transform: rotate(-90deg);
      .open{
        // transform: rotate(180deg);
      }
    }
   
  }
  
  .merak-colapse-item-body {
    flex: 1;
    padding: 10px 15px;
  }
}
.merak-colapse-item.is-active {
  height: auto !important;
}
.dark {
  .merak-colapse-item {
    .merak-colapse-item-header{
      background:var(--el-bg-color);
      .colapse-item-header-cont{
        color: var(--el-text-color-regular);
      }
    }
  }
}
</style>


